<template>
  <div class="app-container">
    <main class="main">
      <section class="option_windows">
        <div class="form_div">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="时间" prop="date">
              <el-date-picker v-model="form.date" type="date" value-format="yyyy-MM-dd" style="width: 50%" placeholder="选择时间"/>
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title" placeholder="请输入名称" style="width: 50%" clearable/>
            </el-form-item>
            <el-form-item label="详情" prop="info">
              <el-input type="textarea" :rows="2" v-model="form.info" placeholder="请输入详情" style="width: 70%" maxlength="50" show-word-limit/>
            </el-form-item>
          </el-form>
          <div style="width: 70%;margin: 0 auto;text-align: right">
            <el-button type="primary" @click="submitForm" plain>确 定</el-button>
          </div>
        </div>
        <div class="table_div">
          <el-table v-loading="loading" :data="valueList" max-height="600">
            <el-table-column label="序号" align="center" prop="id" width="55"/>
            <el-table-column label="时间" align="center" prop="date"/>
            <el-table-column label="标题" align="center" prop="title"/>
            <el-table-column label="详情" align="left" header-align="center" prop="info"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['cms:jiayi_news_typeedit']">修改</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['cms:jiayi_news_type:remove']">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </section>
      <section class="show_windows">
        <Card class="card" border-radius="1rem" width="95%" height="95%">
          <el-timeline reverse>
            <el-timeline-item v-for="(historys, key) in valueMap" :key="'history_item_'+key" placement="top" :timestamp="key" :icon="dev_history_icons[randomNum(10)]" color="#67C23A" size="large">
              <Card class="history" v-for="history in historys" border-radius="1rem" height="auto">
                <span class="history--title">{{history.title}}</span>
                <span>{{history.info}}</span>
              </Card>
            </el-timeline-item>
          </el-timeline>
        </Card>
      </section>
    </main>
  </div>
</template>

<script>
import {getJiayi_about_us_dev_history, updateJiayi_about_us} from "@/api/cms/jiayi_about_us";
import {parseTime} from "@/utils/zzDouUtils/dateUtil";
import {randomNum} from "@/utils/zzDouUtils/numUtil";

export default {
  name: "Jiayi_about_us__dev_history",
  data() {
    return {
      loading: false,
      aboutUsForm: {},
      valueList: [],
      valueMap: {},
      form: {
        id: null,
        date: null,
        title: null,
        info: null,
      },
      rules: {
        date: [
          {required: true, message: "时间不能为空", trigger: "blur"},
        ],
        title: [
          {required: true, message: "标题不能为空", trigger: "blur"},
        ],
      },
    };
  },
  created() {
    this.getDevHistory()
  },
  methods: {
    randomNum,
    getDevHistory() {
      this.loading = true;
      getJiayi_about_us_dev_history().then(response => {
        this.aboutUsForm = response.data;
        this.valueList = response.data.valueObj;
        this.parseMap();
        this.loading = false
      })
    },
    resetForm() {
      this.form = {
        id: null,
        date: null,
        title: null,
        info: null,
      }
    },
    handleUpdate(row){
      this.resetForm();
      this.form = {...row};
    },
    handleDelete(row){
      this.$modal.confirm(`是否确认删除发展历程【${row.title}】`).then(()=>{
        this.aboutUsForm.valueObj = row.id;
        return updateJiayi_about_us(this.aboutUsForm);
      }).then(() => {
        this.getDevHistory();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    submitForm(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.aboutUsForm.valueObj = this.form;
          updateJiayi_about_us(this.aboutUsForm).then(response => {
            this.resetForm();
            this.getDevHistory();
            this.$modal.msgSuccess("操作成功");
          });
        }
      });
    },
    parseMap(){
      this.valueMap = {};
      this.valueList.forEach( v =>{
        let dateTime = parseTime(v.date,'{y}')
        let datas = this.valueMap[dateTime];
        if (!datas){
          datas = []
        }
        datas.push(v)
        this.valueMap[dateTime] = datas;
      })
    }
  }
};
</script>
<style scoped>
.el-table{
  /*滚动条整体样式*/
  ::-webkit-scrollbar {
    /*高宽分别对应横竖滚动条的尺寸*/
    width: 2px;
  }

  /*滚动条里面小方块*/
  ::-webkit-scrollbar-thumb {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #F2F6FC;
  }

  /*滚动条里面轨道*/
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px #FFFFFF;
    border-radius: 10px;
    background: #FFFFFF;
  }
}
/*滚动条整体样式*/
::-webkit-scrollbar {
  /*高宽分别对应横竖滚动条的尺寸*/
  width: 2px;
}

/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
  border-radius: 2px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #F2F6FC;
}

/*滚动条里面轨道*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px #FFFFFF;
  border-radius: 10px;
  background: #FFFFFF;
}
.main {
  width: 100%;
  height: 80vh;
  overflow: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.option_windows {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.option_windows .form_div {
  width: 100%;
  height: 25%;

}

.option_windows .table_div {
  flex: 1;
}

.show_windows {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.show_windows .card{
  padding: 2rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
.show_windows .card .history{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;

  .history--title{
    font-size: 1.3rem;
    font-weight: bold;
  }
}
/deep/.el-timeline-item__node--large{
  left: -0.7rem !important;
  top: -0.5rem !important;
  font-size: 2rem !important;
  width: 2rem !important;
  height: 2rem !important;
}
/deep/.el-timeline-item__timestamp{
  font-size: 1rem;
  font-weight: bold;
  color: #000;
  background-color: #88d4a0;
  width: 7rem;
  height: 1.4rem;
  text-align: center;
  border-radius: 3rem;
}
</style>
